<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="query"
        ref="queryForm"
        :inline="true"
        label-width="40px"
      >
        <el-form-item label="标题" prop="sysMsgTitle">
          <common-input v-model="query.sysMsgTitle" @enter="handleQuery" />
        </el-form-item>

        <el-form-item label="内容" prop="sysMsgContent">
          <common-input v-model="query.sysMsgContent" @enter="handleQuery" />
        </el-form-item>

        <el-form-item label="状态" prop="sysMsgStatus">
          <el-select v-model="query.sysMsgStatus">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="未读" value="1"></el-option>
            <el-option label="已读" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </common-search>
    <el-row slot="tools" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="handleAllRead"
          >全部已读</el-button
        >
      </el-col>
    </el-row>

    <common-table v-loading="loading" :data="list" slot="content">
      <el-table-column
        label="标题"
        align="left"
        prop="sysMsgTitle"
        show-overflow-tooltip
      />
      <el-table-column
        label="内容"
        align="left"
        prop="sysMsgContent"
        show-overflow-tooltip
      />

      <el-table-column
        label="状态"
        align="left"
        prop="sysMsgStatus"
        width="90px"
      >
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.sysMsgStatus === '1'"
            >未读</el-tag
          >
          <el-tag type="success" v-if="scope.row.sysMsgStatus === '2'"
            >已读</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        align="left"
        prop="createTime"
        width="180px"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="80px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />

    <common-info-dialog :visible="isInfo" @cancel="isInfo = false">
      <common-info-table>
        <common-info-table-cell label="标题">{{
          info.sysMsgTitle
        }}</common-info-table-cell>
        <common-info-table-cell label="时间">{{
          info.createTime
        }}</common-info-table-cell>
        <common-info-table-cell label="内容">{{
          info.sysMsgContent
        }}</common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>

<script>
import {
  queryPageList,
  updateMessageStatus,
  updateAllMessageStatus,
} from "@/api/system/sysmsg";
import CommonList from "@/template/CommonList";
import { formatDate } from "@/utils";

export default {
  name: "mymsg",
  components: { CommonList },
  data() {
    return {
      loading: true,
      query: {
        pageNum: 1,
        pageSize: 10,
        sysMsgTitle: null,
        sysMsgContent: null,
        sysMsgStatus: null,
        sysMsgType: 2,
      },
      list: [],
      date: [],
      total: 0,
      isInfo: false,
      info: {
        sysMsgTitle: "",
        sysMsgContent: "",
        createTime: "",
      },
    };
  },

  methods: {
    dateChange() {
      let endTime = null,
        beginTime = null;
      if (this.date && this.date.length > 0) {
        beginTime = this.date[0];
        endTime = this.date[1];
      }
      this.query.beginTime = beginTime || null;
      this.query.endTime = endTime || null;
    },

    handleQuery() {
      this.query.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.date = [];
      this.query = this.$options.data().query;
    },

    getList() {
      this.loading = true;
      queryPageList(this.query)
        .then((res) => {
          if (res && (res.code === 200 || res.rescode === 200)) {
            this.list = res.data.dataList.reduce((r, c) => {
              c.createTime = formatDate(c.createTime);
              r.push(c);
              return r;
            }, []);
            this.total = res.data.totalCount;
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    updateMessageStatus(id) {
      updateMessageStatus({
        id,
      }).then((res) => {
        this.getList();
        //获取通知个数
        // this.$bus.$emit("messageList");
      });
    },
    handleAllRead() {
      updateAllMessageStatus({ sysMsgType: 2 }).then((res) => {
        this.getList();
        //获取通知个数
        // this.$bus.$emit("messageList");
      });
    },
    detail(info) {
      this.info = info;
      this.isInfo = true;
      this.updateMessageStatus(info.sysMsgId);
    },
  },
  mounted() {
    this.getList();

    //点击顶部铃铛 告警 进入告警的tab页 刷新告警列表
    if (this.$route.query.currentTab === "3") {
      this.$bus.$on("NOTICE_CLICK", this.getList);
    }
  },
  beforeDestroy() {
    this.$bus.$off("NOTICE_CLICK");
  },
};
</script>

<style scoped lang="scss"></style>
